<template>
	<u-popup mode="center" :round="20" :show="portuniShow" @close="portuniClose" width="90%">
		<u-notify ref="uNotify" />

		<view style="height: 780rpx;padding-top:100rpx;width: 650rpx;" class="padding-sm">

			<uni-forms ref="valiForm" :rules="rulesFrom" :modelValue="mode" labelWidth="100px" label-position="left">
				<uni-forms-item label="进度" required name="speedOfProgress">
					<uni-easyinput v-model="mode.speedOfProgress" placeholder="请输入进度"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="上传图片" required>

					<u-upload :sizeType="['original', 'compressed']" :fileList="fileList" @afterRead="afterRead"
						@delete="deletePic" name="1" multiple :maxCount="5"></u-upload>

				</uni-forms-item>

				<!-- 	<uni-forms-item label="备注"  required name="remark">
					<uni-easyinput type="textarea" v-model="mode.remark" placeholder="请输入备注内容"></uni-easyinput>
				</uni-forms-item -->
			</uni-forms>
			<view style="position:absolute;bottom: 20rpx; left: 50%; transform: translateX(-50%); width: 100%;"
				class="flex justify-around">
				<view class="cu-btn round bg-gray" @click="portuniClose" style="width: 40%;">关闭</view>
				<view class="cu-btn round bg-green" style="width: 40%;" @click="portuniOpen">确定</view>
			</view>
		</view>
		<TipsModal :uModalShow="uModalShow" :uModalContent="uModalContent" @uModalCle="uModalCle"
			@uModalCom="uModalCom" />
	</u-popup>
</template>
<script>
	import TipsModal from '@/components/TipsModal/TipsModal.vue' //确定窗
	import myApi from '@/utils/app.js' //调用接口使用
	export default {
		name: 'CompletedMal',
		components: {
			TipsModal
		},
		data() {
			return {
				portuniShow: false,
				mode: {},
				fileList: [],
				rulesFrom: {
					speedOfProgress: {
						rules: [{
							required: true,
							errorMessage: '进度'
						}]
					},

				},
				uModalShow: false, //确定窗
				uModalContent: '你确定要备注吗？', //确定窗
			}
		},
		methods: {
			OnPortuni(item) {
				this.mode = {
					...item,
					remark: item.remark ? item.remark : ''
				}
				if (this.mode.picPath) {
					let list = this.mode.picPath.split(',')
					this.fileList = list.map((item,index) => ({
						url: item,
						name:`image0${index}`,
						status: "success"
					}));
				}

				this.portuniShow = true
			},
			portuniOpen() { // 确定触发
				if (this.fileList.length == 0) return this.onNotify({
					type: 'error',
				})
				this.$refs.valiForm.validate().then(res => {
					this.OrderEdit()
				}).catch(err => {
					this.onNotify({
						type: 'error',
						message: err[0].errorMessage,
					})
				})
			},
			async OrderEdit() {
				let urlString =undefined
				if(this.fileList && this.fileList.length>0){
					const urls = this.fileList.map(item => item.url);
					// 使用 join 方法将数组转换为用逗号分隔的字符串
					urlString = urls.join(',');
				}
				try {
					const res = await this.$request({
						url: myApi.updateDetailById,
						method: 'POST',
						data: {
							orderNo: this.mode.orderId,
							vto: {
								id: this.mode.id,
								picPath:this.fileList && this.fileList.length>0? urlString:null,
								speedOfProgress: this.mode.speedOfProgress
							}
						}
					});
					console.log(res)
					if (res.code == 200) {
						this.$emit('ok', 1)
						this.portuniClose()
					}
				} catch (e) {
					// 失败执行
					console.log(e)
				} finally {
					// 销毁执行
					this.loading = false
				}
			},
			// 确定框 确定
			async uModalCom() {
				this.$emit('OnOrderReply', this.mode)
				this.uModalCle()
			},
			// 取消删除
			uModalCle() {
				this.uModalShow = false
			},
			onNotify(round) {
				this.$refs.uNotify.show({
					type: round.type ? round.type : 'success',
					message: round.message ? round.message : '请上传图片',
					top: 50
				})
			},
			portuniClose() {
				this.portuniShow = false
				this.mode = {}
				this.fileList = []
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				console.log(this.fileList)
			},
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: myApi.picUpload, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						formData: {
							ip: myApi.host
						},
						header: {

						},
						success: (res) => {
							console.log(res)
							setTimeout(() => {
								const data = JSON.parse(res.data)
								console.log(data)
								resolve(data.result[0])
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>